<template>
  <div class="mine">
      <MyHead title="个人中心"  :noBack="true"></MyHead>
      <div class="mine-top">
          <div class="user-info" v-if="userInfo">

              <UploadFile @getfilepath="changeavatar">
                <img class="avatar" :src="userInfo.avatar.replace(/public/,baseURL)" v-if="userInfo.avatar" alt="">
                <img class="avatar" :src="pic" v-else alt="">
              </UploadFile>

              <h2 class="name mt10" >{{userInfo.username}}</h2>
              <h3 class="phone mt10">{{userInfo.phone}}</h3>
          </div>
          <div class="nologin" v-else>
              <van-button @click="gotopage('/login')" round block type="primary" class="tada1">去登录</van-button>
          </div>
      </div>
      <div class="cell">
            <van-cell-group >
                <div v-if="userInfo">
                    <van-cell title="个人信息" icon="manager-o" is-link @click="gotopage('/myinfo')" :value="userInfo.nickname" />
                    <van-cell title="面试题" icon="label-o" :value="myms.length" is-link  to="/myms"  />
                    <van-cell title="Offer" icon="award-o" :value="obj.offers" is-link  to="/myoffers" />
                    <van-cell title="点赞" icon="like-o" :value="obj.likes" is-link :to="'/myactions/1?value='+obj.likes" />
                    <van-cell title="收藏" icon="star-o" :value="obj.collects" is-link :to="'/myactions/2?value='+obj.collects"   />
                    <van-cell title="评论" icon="comment-o" :value="obj.pings" is-link :to="'/myactions/3?value='+obj.pings"  />
                    <van-cell title="我的好友" icon="friends-o" value="2" is-link  />
                    <van-cell title="我的地址" icon="location-o"  is-link to="/address" />
                    <van-cell title="修改密码" icon="eye-o"  is-link  to="/resetpass"  />
                </div>


                <van-cell title="历史记录" icon="records-o" value="88" is-link  />

                <van-cell title="通知" icon="volume-o" value="3" is-link  />
                <van-cell title="公告" icon="cluster-o" value="2" is-link  />

                <van-cell title="清除缓存" icon="share-o" @click="clearCache" :value="cache+'M'" is-link  />
                <van-cell title="设置" icon="setting-o" is-link />

            </van-cell-group>

            <div class="quit" v-if="userInfo" >
              <van-button type="default" block @click="todoLogout"  >退出登录</van-button>
            </div>
        </div>


        <van-overlay :show="show"  >
            <div class="mask" v-if="show" >
                <Dao
                  :time="Math.ceil(cache/100)"
                  :onFinish="onFinish"
                  :mstyle="{top:0,left:0,position:'relative'}"
                  :swidth="60"
                  size="160px"
                ></Dao>
            </div>
        </van-overlay>

  </div>
</template>

<script>
import { todogetmslikes , todogetcollectlist , todogetpinglist , todoGetOfferList } from '@/api/api'

export default {
  data(){
    return {
        cache:0,
        show:false,
        obj:{

        }
    }
  },
  mounted(){
    this.getUserInfoAsync();
    this.cache = (localStorage.getItem("cache")? localStorage.getItem("cache") * 1 : 0 ) + Math.round(Math.random() * 100)

    localStorage.setItem('cache',this.cache);

    this.$nextTick(()=>{
      if(sessionStorage.getItem('token')){
        this.getMyMsListAsync()
      }
      if(this.userInfo){
        this.getMyDatas()
      }
    })
  },
  methods:{
    async getMyDatas(){

      let offers = await todoGetOfferList({
        phone:this.userInfo.phone,

      })

      let likes = await todogetmslikes({
        phone:this.userInfo.phone,

      })

      let collects = await todogetcollectlist({
        phone:this.userInfo.phone,

      })

      let pings = await todogetpinglist({
        phone:this.userInfo.phone,
      })

      this.$set(this.obj,'likes',likes.result.length)
      this.$set(this.obj,'collects',collects.result.length)
      this.$set(this.obj,'pings',pings.result.length)
      this.$set(this.obj,'offers',offers.result.length)


    },

    onFinish(){

      this.cache = 0;
      localStorage.setItem('cache',0);
      this.show = false;
      this.ShowToast('缓存清除成功了')
    },
    clearCache(){
      if(this.cache!=0){
        this.show = true;
      }else{
        this.ShowToast('没有任何缓存数据')
      }

    },
    todoLogout(){
      this.$dialog.confirm({
          title: '友情提示',
          message: '你真的要注销登录吗?',
        })
        .then(() => {
            sessionStorage.removeItem('token')
            this.getUesrInfoData(null)
        })
        .catch(() => {

        });
      }
    }
}
</script>


<style lang="scss" scoped>
.mask{
  width:100%;
  height:100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.mine{
  width:100%;
  min-height:calc(100vh - 50px);
  background: #f4f4f4;
  .quit{
    padding:16px;
  }
  &-top{
    width:100%;
    height:240px;
    padding:15px;
    background: url(../../assets/images/mine.gif) 0 0 no-repeat;
    background-size:100% 100%;
    .user-info{
      text-align: center;
      width:100%;
      height:100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color:#fff;
      font-size: 24px;
      .avatar{
        width:70px;
        height:70px;
        border-radius: 50%;
      }
      .phone{
        font-size: 20px;
      }
    }
    .nologin{
      width:100%;
      height:100%;
      display: flex;
      align-items: center;
      padding:0 80px;
    }
  }
}
</style>
